<!DOCTYPE html>
<html lang="fr">
<head>	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="description" content="Amusez vous à simuler un comportement cellulaire en HTML5 et JavaScript grâce à notre projet tutoré - IUT Charlemagne - 2011">
	<title>(c)Evolution</title>
	
	<link rel="stylesheet" type="text/css" href="./css/menu.css" /> 
	
	<!-- Import du Javascript -->
	<script type="text/javascript" src="./js/jQuery.js"></script>
	<script type="text/javascript" src="./js/Monde.js"></script>
	<script type="text/javascript" src="./js/Position.js"></script>
	<script type="text/javascript" src="./js/Entite.js"></script>
	<script type="text/javascript" src="./js/Cc.js"></script>
	<script type="text/javascript" src="./js/Molecule.js"></script>
	<script type="text/javascript" src="./js/Cellule.js"></script>
	<script type="text/javascript" src="./js/Vue.js"></script>
	<script type="text/javascript" src="./js/Controleur.js"></script>
	<script type="text/javascript" src="./js/Initialisation.js"></script>
	<script type="text/javascript">$(document).ready(function(){init()});</script>
</head>
<body onclick="controleur.onclick_page(event);" onkeyPress="controleur.touche(event);">
		<img src="./images/banniere.png" alt="(c)Evolution - Simulation Cellulaire Next-Gen">
<!-- CANVAS -->
	<canvas id="canvas" width="800" height="600" style="border: 1px solid; float: left;">
	</canvas>
	<script type="text/javascript">
		var controleur = new Controleur();
		var canvas = document.getElementById('canvas'); 
	</script>
<!--Contient le menu et les boutons. C'est ce qu'on déplace-->
<div id="Conteneurs">
	<!-- Contient les menus à proprement parler. Disparait lorsqu'on rétracte le Conteneur"-->
	<div id="Menus">
		<div id="MenuPrincipal">
			<ul id="menu">
				<li><h3>Menu</h3></li>
                <li onclick="controleur.nouveauMonde();"><img src="./images/nouveau_monde.png" title="Nouveau Monde" alt="N"></li>
				<li onclick="controleur.avancerUnPas();"><img src="./images/pasapas.png" title="Pas à pas" alt="T"></li>
				<li onclick="controleur.avancerAll();"><img src="./images/demarrer.png" title="Démarrer" alt="D"></li>
				<li onclick="controleur.stop();"><img src="./images/pause.png" title="Pause" alt="P"></li>
                <li><a href="javascript:window.close()"><img src="./images/quitter.png" title="Quitter" alt="Q"></a></li>
			</ul>
		</div>
		<div id="MenuCellule">
			<ul id="cellules">
				<li><h3>Cellules</h3></li>
				<li onclick="controleur.type_entite('Brasseryte');"><img src="./images/brasseryte.png" title="Brasseryte" alt="B"></li> 
				<li onclick="controleur.type_entite('Kommyte');"><img src="./images/kommyte.png" title="Kommyte" alt="K"></li>
				<li onclick="controleur.type_entite('Polakocyte');"><img src="./images/polakocyte.png" title="Polakocyte" alt="P"></li>
				<li onclick="controleur.type_entite('Samuelocyte');"><img src="./images/samuelocyte.png" title="Samuelocyte" alt="S"></li>
				<li onclick="controleur.type_entite('Zimbabwyte');"><img src="./images/zimbabwyte.png" title="Zimbabwyte" alt="Z"></li>
			</ul>
		</div>
		<div id="MenuMolecule">
			<ul id="molecules">
				<li><h3>Molécules</h3></li>
				<li onclick="controleur.type_entite('Bretoine');"><img id="bretoine" src="images/bretoine.png" alt="br"></li>
				<li onclick="controleur.type_entite('Carottoine');"><img id="carotoine" src="images/carottoine.png" alt="ca"></li>
				<li onclick="controleur.type_entite('Haricoine');"><img id="haricoine" src="images/haricoine.png" alt="ha"></li>
				<li onclick="controleur.type_entite('Kiwine');"><img id="kiwine" src="images/kiwine.png" alt="kiwine"></li>
				<li onclick="controleur.type_entite('Mongoloine');"><img id="mongoline" src="images/mongoloine.png" alt="mo"></li>
				<li onclick="controleur.type_entite('Oppiomine');"><img id="oppiomine" src="images/oppiomine.png" alt="op"></li>
				<li onclick="controleur.type_entite('Pommine');"><img id="pommine" src="images/pommine.png" alt="po"></li>
			</ul>
		</div>
		<div id="MenuCyclamide">
			<ul id="cc">
				<li><h3>Cyclamides Cruzéïdes</h3></li>
				<li onclick="controleur.type_entite('Acetone');"><img id="acetone" src="images/acetone.png" alt="c3h6o"></li>
				<li onclick="controleur.type_entite('Acide sulfurique');"><img id="acide_sulfurique" src="images/acide_sulfurique.png" alt="so42-"></li>
				<li onclick="controleur.type_entite('Benzene');"><img id="benzene" src="images/benzene.png" alt="c6h6"></li>
				<li onclick="controleur.type_entite('Eau');"><img id="eau" src="images/eau.png" alt="h2o"></li>
				<li onclick="controleur.type_entite('Ethanol');"><img id="ethanol" src="images/ethanol.png" alt="c2h6o"></li>
			</ul>
		</div>
		<div id="MenuNbTour">
			Tours<br/> <input type="text" id="nbTours" size="4" value="0"/>
		</div>
		<div id="MenuNbEntite">
			Quantité<br/> <input type="text" id="nbEntite" size="4" value="1"/>
		</div>
	</div>
	
</div>
<!-- Contient les onglets, se déplace avec le conteneur-->
	<div id="Boutons">
		<div id="BoutonPrincipal">
			<a href=""><img src="./images/bouton_principal.gif" title="Menu Principal" alt="Menu Principal"></a>
		</div>
		<div id="BoutonCellule">
			<a href=""><img src="./images/bouton_cellule.gif" title="Menu Cellules" alt="Menu Cellules"></a>
		</div>
		<div id="BoutonMolecule">
			<a href=""><img src="./images/bouton_molecule.gif" title="Menu Molécules" alt="Menu Molécules"></a>
		</div>
		<div id="BoutonCyclamide">
			<a href=""><img src="./images/bouton_cyclamide.gif" title="Menu Cyclamides" alt="Menu Cyclamides"></a>
		</div>
		<div id="FinMenu">
			<a href=""><img src="./images/panneau.gif" title="Ouvrir ou fermer le menu" alt="Basculer Menu"></a>
		</div>
	</div>

 <!-- /HTML5 TABS CODE -->
	<!--
	Utilisation de la balise input de HTML, avec un petit morceau de code JS.
	Fonctionne sous Chrome et Opera. Ne fonctionne pas sous IE 8. En théorie ca devrait fonctionner sous Firefox 3 (Sur FF 4 ça fonctionne c'est sur).
	-->
	<div style="height:720px">
		<div id="MenuOption">
			<div id="Sliders">
				<TABLE id="tableauOption">
					<TR>
						<TD>Vitesse</TD>
						<TD>Température</TD>
						<TD>Pression</TD>
						<TD>Nourriture</TD>
					</TR>
					<TR>
						<TD><input type="range" min="0" max="10" value="5" step="1" onchange="controleur.showValue(this.value)" /></TD>
						<TD><input type="range" min="-10" max="100" value="38" step="1" onchange="controleur.showValue2(this.value)" /> </TD>
						<TD><input type="range" min="700" max="1300" value="1015" step="1" onchange="controleur.showValue3(this.value)" /></TD>
						<TD><input type="range" min="0" max="100" value="50" step="1" onchange="controleur.showValue4(this.value)" /></TD>
					</TR>
					<TR>
						<TD><span id="vitesse">5</span></TD>
						<TD><span id="temperature">38</span></TD>
						<TD><span id="pression">1015</span></TD>
						<TD><span id="nourriture">50</span></TD>
					</TR>
				</TABLE>
			</div>
			
		</div>
		<div id="LanguetteOption">
			<a href=""><img src="./images/option.gif" title="Ouvrir ou fermer le menu" alt="Basculer Menu"></a>
		</div>
	</div>
<script src="./js/Menus.js" type="text/javascript"></script>
<div id="pied">
	<div id="w3c">
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fdl.dropbox.com%2Fu%2F4061661%2Fcevolution_v0.1%2Findex.html"><img src="./images/Logo_W3C_HTML.png" title="Respecte les standards W3C - HTML5" alt="W3C Validated"></a>
	<a href="http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fdl.dropbox.com%2Fu%2F4061661%2Fcevolution_v0.1%2Findex.html"><img src="./images/Logo_W3C_CSS.png" title="Respecte les standards W3C - CSS3" alt="W3C Validated"></a>
	</div>
</div>
</body>
</html>